
<script>
import defaultSettings from '@/config/defaultSettings'
import {SysMixin} from '@/mixins/SysMixin'
import store from "@/store"
export default {
    name:'LEditTableColumn',
    components: {
        
    },
    mixins:[SysMixin],
    props:{
      record:{
        type:Object,
        default:()=>{}
      },
      index:Number,
      text:[String,Array,Number],
      column:{
        type:Object,
        default:()=>{}
      },
      table:Object,
      rowKey:String,
      tableRef:[String,Number],
     
     
    },
    computed:{},
    data () {
        return {
            defaultSettings,
            showError:{},
            verifyT:null,
            dropdownStyle:{maxHeight:'300px'}
        }
    },
    methods:{
       
        onchange(e){
           
            let value
            if(e.target && e.target){
                value = e.target.value
            }else{
                value = e
            }
            
            if(this.column.component=='select'){
                 if(this.column.mode=="multiple" || this.column.mode=="tags"){
                    value = value.join(",")
                }
            }

            if(this.column.component=='treeSelect'){
                 if(this.column.treeCheckable || this.column.multiple){
                    value = value.join(",")
                }
            }
           
            if(this.verifyT){
                clearTimeout(this.verifyT)
            }
            this.verifyT = setTimeout(() => {
                this.cellVerify(value)
            }, 200);
           
        },
       
        cellVerify(value){
            this.record[this.column.dataIndex] = value
            //非空验证
            if(this.column.required && this.column.required==true){
                if(value!== null && value !== undefined && value!==""){
                    this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]=false
                }else{
                    this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]=true
                }
                
            }else{
                this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]=false
            }

            if(!this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]){
                //正则验证
                if(this.column.regExp){
                    if(this.column.regExp.test(value)){
                        this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]=false
                    }else{
                        this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]=true
                    }
                }
            }
            
        },
        createInputColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}>
                        <a-input size="small"  value={this.record[this.column.dataIndex]}  style="width:100%"  onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        },
        createPasswordColumn(){
             return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}>
                        <a-input-password size="small"  value={this.record[this.column.dataIndex]}  style="width:100%"  onChange={this.onchange} disabled={!this.column.editable}/>
                    </a-badge>
                </div>
            )
        },
        createSingleSelectColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-select size="small" style="width:100%" value={this.record[this.column.dataIndex]}  onChange={this.onchange}  show-search mode={this.column.mode}>
                            <a-select-option value=""><span style="display: inline-block;width: 100%" title="请选择">请选择</span></a-select-option>
                            {
                                store.state.dict.dictInfo[this.column.dictCode].dictInfo.map(item => {
                                    return <a-select-option value={item.itemValue}>{item.itemText}</a-select-option>
                                })
                            }
                        
                        </a-select>
                    </a-badge>
                </div>
            )
        },
        createMultipleSelectColumn(){
            let v = []
            if(!this.record[this.column.dataIndex]){
                v=[]
            }else{
                v=this.record[this.column.dataIndex].split(",")
            }
            return(
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-select size="small" style="width:100%" value={v}  onChange={this.onchange}  show-search mode={this.column.mode}>
                            {
                                store.state.dict.dictInfo[this.column.dictCode].dictInfo.map(item => {
                                    return <a-select-option value={item.itemValue}>{item.itemText}</a-select-option>
                                })
                            }
                        
                        </a-select>
                    </a-badge>
                </div>
            )
        },
        createTimeColumn(){
           
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-date-picker size="small" show-time defaultValue={this.record[this.column.dataIndex] || ""} value={this.record[this.column.dataIndex] || ""} valueFormat={this.column.valueFormat || 'YYYY-MM-DD HH:mm:ss'} onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        },
        createDateColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-date-picker size="small" defaultValue={this.record[this.column.dataIndex] || ""}  value={this.record[this.column.dataIndex] || ""} valueFormat={this.column.valueFormat || 'YYYY-MM-DD'} onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        },
       
        createTreeSelectColumn(){
            let dictOptions = []
            if(store.state.dict.dictInfo && store.state.dict.dictInfo[this.column.dictCode]){
               dictOptions= store.state.dict.dictInfo[this.column.dictCode].dictInfo
            }
            let v;
            if(this.column.treeCheckable || this.column.multiple){
                if(!this.record[this.column.dataIndex]){
                    v=[]
                }else{
                    v=this.record[this.column.dataIndex].split(",")
                }
            }else{
                v=this.record[this.column.dataIndex]
            }
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-tree-select style="width:100%" size="small"
                            dropdownStyle={this.dropdownStyle}
                            value={v}
                            treeCheckable={this.column.treeCheckable || false}
                            multiple = {this.column.multiple || false}
                            treeData={dictOptions}
                            treeDefaultExpandAll={false}
                            showCheckedStrategy="SHOW_ALL"
                            allow-clear={true}
                            onChange={this.onchange}>
                        </a-tree-select>
                    </a-badge>
                </div>
            )
        },
        createInputNumberColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-input-number size="small" style="width: 100%" step={this.column.step || 1} value={this.record[this.column.dataIndex]} defaultValue={this.record[this.column.dataIndex]} onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        },
        createMonthColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-month-picker style="width: 100%" valueFormat={this.column.valueFormat || 'YYYY-MM'} value={this.record[this.column.dataIndex] || ""} defaultValue={this.record[this.column.dataIndex] || ""} onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        },
        createTimePickerColumn(){
            return (
                <div>
                    <a-badge dot={this.table.verifyRes["["+this.index+"]"+this.column.dataIndex]}  style="width:100%">
                        <a-time-picker style="width: 100%" show-time valueFormat={this.column.valueFormat || 'HH:mm:ss'} format={this.column.format || 'HH:mm:ss'} value={this.record[this.column.dataIndex] || ""} defaultValue={this.record[this.column.dataIndex] || ""} onChange={this.onchange}/>
                    </a-badge>
                </div>
            )
        }

       
    },
    mounted(){
        this.$nextTick(() => {
            // console.log(this.table.verifyRes)
        })
    },
    created(){
       
    },
   
    render: function(h) {
     
        let defaultColumn = (
            <span>{this.record[this.column.dataIndex]}</span>
        )
      
        //验证原始数据
        this.cellVerify(this.record[this.column.dataIndex])

        switch (this.column.component) {
                case "input":
                    if(this.column.editable){
                        return this.createInputColumn()
                    }else{
                        return (defaultColumn)
                    }
                case "select":
                    if(this.column.editable){
                        if(this.column.mode=="multiple" || this.column.mode=="tags"){
                            return this.createMultipleSelectColumn()
                        }else{
                            return this.createSingleSelectColumn()
                        }
                        
                    }else{
                        return (<span>{this.dictText(this.column.dictCode,this.record[this.column.dataIndex])}</span>)
                    }
                case "time":
                    if(this.column.editable){
                        return this.createTimeColumn()
                    }else{
                        return (defaultColumn)
                    }
                    
                case "date":
                    if(this.column.editable){
                        return this.createDateColumn()
                    }else{
                        return (defaultColumn)
                    }
                    
                case "treeSelect":
                    if(this.column.editable){
                        return this.createTreeSelectColumn()
                    }else{
                        return (<span>{this.dictText(this.column.dictCode,this.record[this.column.dataIndex])}</span>)
                    }
                    
                case "inputNumber": 
                    if(this.column.editable){
                        return this.createInputNumberColumn()
                    }else{
                        return (defaultColumn)
                    }
                    
                case "password":
                    return this.createPasswordColumn()
                case "month":
                    if(this.column.editable){
                        return this.createMonthColumn()
                    }else{
                        return (defaultColumn)
                    }
                    
                case "timePicker":
                    if(this.column.editable){
                        return this.createTimePickerColumn()
                    }else{
                        return (defaultColumn)
                    }
                    
                default:
                    return (defaultColumn)  
            } 
    }
}
</script>

<style lang="less" scoped>
   
    // ::v-deep .ant-input{
    //     border: none !important;
    //     box-shadow: none !important;
    //     background-color: #ffffff !important;
    //     color:rgba(0,0,0, 0.8) !important;
        
    // }
    // ::v-deep .ant-input-number{
    //     border: none !important;
    //     box-shadow: none !important;
    //     background-color: #ffffff !important;
    //     color:rgba(0,0,0, 0.8) !important;
    // }
    
</style>